<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="js/vue.global.js"></script>
    <script src="js/jquery-3.6.0.min.js"></script>
    <style>
      body{
        padding:0;
        margin: 0;
      }
      a{
        text-decoration: none;
      }
      ul{
        list-style-type: none;
        padding: 0;
      }
      .channel-layout{
        padding:0 64px;
      }
      .channel-nav-sub-item a{
        color: #61666D;
        font-size: 15px;
      }
      .channel-nav-name a{
        color:#18191C;
        font-size: 22px;
      }
      .channel-nav{
        display: flex;
        align-items: center;
      }
      .fix-wrapper{
        height: 64px;
        padding: 0 64px;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
      }
      .channel-nav-name{
        margin-right: 20px;
        min-width: max-content;
      }
      ul.channel-nav-sub-ul{
        display: flex;
        justify-content: space-between;
        list-style-type: none;
        padding:0;
        width: 620px;
      }

      .grid{
        display: grid;
        grid-template-columns: repeat(5,1fr);
        grid-gap: 20px 12px;
      }
      .video-card-image img{
        width: 100%;
        border-radius:6px;
      }

      .video-card-body{
        display: grid;
        grid-template-columns: repeat(4,1fr);
        grid-gap: 20px 12px;
      }
      .video-card-list{
        grid-column: span 4;
      }

      .video-card-info-tit a {
        color: #18191C;
      }
      .video-card-info-bottom span{
        color: rgb(148, 153, 160);
        font-size: 13px;
      }
      .area-header span , .aside-head span {
        font-size: 20px;
        color:rgb(24, 25, 28);
      }
      .area-header,.aside-head{
        margin: 16px 0;
      }
      .rank-list-video-item-index{
        font-family: Avenir;
        font-style: italic;
        font-size: 14px;
        font-weight: 600;
        color: #C9CCD0;
        margin-right:6px;
        width: 20px;
        text-align: center;
      }
      .rank-list-video-item:nth-child(1) .rank-list-video-item-index{
        color: #ff473d;
      }
      .rank-list-video-item:nth-child(2) .rank-list-video-item-index{
        color:#ff6a29;
      }
      .rank-list-video-item:nth-child(3) .rank-list-video-item-index{
        color: #ff9214;
      }
      .rank-list-video{
        display: grid;
        border: 1px solid #F1F2F3;
        border-radius: 6px;
        background-color: #F6F7F8;
      }
      .rank-list-video-item-wrap{
        display: flex;
        align-items: center;
      }

      .rank-video-card-info-tit{
        color: #18191C;
        font-size: 14px;
        line-height: 18px;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .rank-list-video-item{
        white-space: nowrap;
        overflow: hidden;
      }

      .rank-list-video-item:nth-child(2n+1){
        background-color: #FFFFFF;
      }
      .rank-list-video-item:nth-child(2n){
        background-color: #F6F7F8;
      }

      
      .rank-video-card-info,.rank-video-card {
        min-width: 0;
      }
      /* 以下为这次修改后的CSS样式 */
      .area-header{
        display: flex;
        justify-content: space-between;
      }

      .primary-button{
        padding: 8px 12px;
        line-height: 16px;
        border-radius: 8px;
        border: 1px solid #E3E5E7;
        background-color: #FFFFFF;
        transition: .2s;
        cursor: pointer;
      }

      .primary-button:hover{
        background-color: #E3E5E7;
      }

      .primary-button span{
        font-size: 13px;
        color: #18191C;
      }

      .primary-button:focus{
        outline:none;
      }
      
    </style>
  </head>
  <body>
    <div class="container">
      <div class="fix-wrapper">
        <div class="channel-nav">
          <div class="channel-nav-name"><a href="">生活</a></div>
          <div class="channel-nav-sub">
            <ul class="channel-nav-sub-ul">
              <li class="channel-nav-sub-item"><a href="">首页</a></li>
              <li class="channel-nav-sub-item"><a href="">搞笑</a></li>
              <li class="channel-nav-sub-item"><a href="">亲子</a></li>
              <li class="channel-nav-sub-item"><a href="">出行</a></li>
              <li class="channel-nav-sub-item"><a href="">三农</a></li>
              <li class="channel-nav-sub-item"><a href="">家居房产</a></li>
              <li class="channel-nav-sub-item"><a href="">手工</a></li>
              <li class="channel-nav-sub-item"><a href="">绘画</a></li>
              <li class="channel-nav-sub-item"><a href="">日常</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="channel-layout">
        <div class="grid">
          <div class="video-card-list" >
            <div class="area-header">
              <div class="left">
                <a href=""><span>搞笑</span></a>
              </div>
              <div class="right">
                <button class="primary-button" type="button" @click="getVideoCardList">
                  <span>换一换</span>
                </button>
              </div>
              
              
            </div>
            <div class="video-card-body">

              <div class="video-card" v-for="videoCard in selectedList">
                <div class="video-card-image">
                  <img :src="videoCard.img" :alt="videoCard.alt">
                </div>
                <div class="video-card-info">
                  <h4 class="video-card-info-tit"><a :href="videoCard.href">{{videoCard.title}}</a></h4>
                  <div class="video-card-info-bottom">
                    <a :href="videoCard.authorSpace">
                      <span class="video-card-info-author">{{videoCard.author}}</span>
                      <span class="video-card-info-date">{{videoCard.date}}</span>
                    </a>
                  </div>
                </div>
              </div>


            </div>
          </div>
          

          <div class="aside-wrap">
            <div class="aside-head">
              <a href=""><span>热门</span></a>
            </div>
            <div class="aside-body">
              <ul class="rank-list-video">

                <li class="rank-list-video-item" v-for="(videoItem,idx) in rankListVideo">
                  <div class="rank-list-video-item-wrap">
                    <span class="rank-list-video-item-index">{{idx+1}}</span>
                    <a class="rank-video-card" :href="videoItem.href">
                      <div class="rank-video-card-info">
                        <h3 class="rank-video-card-info-tit">{{videoItem.title}}</h3>
                      </div>
                    </a>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script>
      const rankListVideo = [
        {
          href:"https://www.bilibili.com/video/BV1nC4y1G7qx/?spm_id_from=333.1073.channel.secondary_floor_rank.click", title:"领导说干不了就滚"
        },
        {
          href:"https://www.bilibili.com/video/BV1s841167EX/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"遗憾终究是遗憾"
        },
        {
          href:"https://www.bilibili.com/video/BV1Zw411c7ya/",title:"不多说了，请看vcr"
        },
        {
          href:"https://www.bilibili.com/video/BV1CN41147Eo/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"答非所问（奥义超级版）"
        },
        {
          href:"https://www.bilibili.com/video/BV16G411m7QY/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"默契兄弟"
        },
        {
          href:"https://www.bilibili.com/video/BV16C4y1G7Nk/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"【误 入 大 电 音 寺】"
        },
        {
          href:"https://www.bilibili.com/video/BV1Wj411t7SQ/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"你的童年遗憾有哪些?"
        },
        {
          href:"https://www.bilibili.com/video/BV1Py4y1N72x/?spm_id_from=333.1073.channel.secondary_floor_rank.click",title:"各地人的娱乐项目"
        },
      ];

      const app = Vue.createApp({
        data(){
          return {
            page:1,
            selectedList : [],
            rankListVideo : rankListVideo
          }
        },
        mounted(){
          console.info("create");
          this.getVideoCardList();
        },
        methods:{
          getVideoCardList(){
            var self = this;
            $.ajax({
              type:"get",
              url:"/experiment06/records/getPage"+"?page="+this.page,
              contentType : "application/json",
              success:function(data){
                if(data.code == "10000") {
                  var list = [];
                  self.page = self.page % 2 + 1;
                  for(item of data.data){
                    item.img = "/experiment06/img/" + item.img;
                    list.push(item);
                  }
                  self.selectedList = list;
                  console.info("page");
                } else{
                  alert(data.msg);
                }
              }
			})
          }
        }
      }).mount(".channel-layout");

    </script>
  </body>       
</html>
